<!--
 * @Author: zcl
 * @Date: 2024-10-09 14:42:27
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-06-20 10:45:39
 * @FilePath: /ssnewapp/pageHome/company/components/result.vue
-->
<template>
  <view>
    <view class="tab-card">
      <view ref="tabCard" @click="tabClick(index)" :class="current == index ? 'item-ac' : 'item'"
        v-for="(item, index) in tabList" :key="index">{{ item.name }}({{ item.num > 20 ? 20 : item.num }})</view>
    </view>
    <!-- <view v-if="mId == userInfo.id && queryOptions.type == 1 && queryOptions.matchStep != 0" class="add-msg" @click="addProductMsg">
      <view class="add-msg-text">让您的匹配结果更完整...</view>
      <view class="row" style="align-items: center">
        <view class="add-msg-btn">去补充</view>
        <view style="margin-left: 14rpx; padding-top: 4rpx">
          <image :src="require('../../static/fanhui.png')" style="width: 14rpx; height: 26rpx"></image>
        </view>
      </view>
    </view> -->
    <!-- <uv-loading-icon :show="loading"></uv-loading-icon> -->
    <view class="product-list" v-if="productList.length">
      <view class="product-item" v-for="(item, index) in productList" :key="index">
        <view style="
            box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(246, 251, 255, 1);
          " v-if="!isAll ? index < 5 : index < 20">
          <view class="item-content" @click.stop="gotoProductDetail(item)">
            <view class="product-item-img">
              <image :src="item.productPic" mode="aspectFill"></image>
            </view>
            <view class="product-item-name">{{ item.productName }}</view>
            <view class="product-item-type">{{
              product.find((v) => v.dictValue == item.loanType) && product.find((v) => v.dictValue ==
                item.loanType).dictLabel
            }}</view>
            <image v-if="item.enableTop == 1" class="image" :src="require('../../static/Populartags.png')" mode="">
            </image>
          </view>
          <view class="product-item-v row" style="align-items: flex-start" @click.stop="gotoProductDetail(item)">
            <view style="width: 50%;white-space: nowrap">
              <view>
                <text>最高额度：</text><text>{{ item.productMaxQuota }}万</text>
              </view>
              <view>
                <text>年货利率：</text><text>{{ item.minAnnualRate }}%～{{ item.maxAnnualRate }}%</text>
              </view>
            </view>
            <view class="row DKQ" style="align-items: flex-start;">
              <text style="width: 40%;white-space: nowrap">贷款期限：</text>
              <text style="width: 60%;word-break: break-all">{{ item.loanTerm }}期</text>
            </view>

          </view>

          <!-- <view @click.stop="gotoProductDetail(item)" class="product-item-h"
            v-if="current == 0 && item.quota != '' && item.quota != null">
            预估可贷：{{ item.quota }}万</view> -->
          <view v-if="current == 1 && item.reason" class="product-item-g">
            {{ item.reason }}
            <!-- <Rdmore :key="moreKey" hideLineNum="2" showHeight="80">
              不推荐原因 
            </Rdmore> -->
          </view>
        </view>
      </view>

      <view v-if="tabList[current].num > 5" :style="isAll ? 'margin-top: 20rpx;' : ''"
        style="text-align: center; color: #999; padding-top: 30rpx" @click="seeAllProduct">
        {{ !isAll ? "点击查看更多" : "收起" }}
      </view>
    </view>
    <view v-else class="no-data">
      <empty v-if="!loading" :empty-title="'抱歉，暂无数据！'" :imgType="'dataEmpty'"
        :emptyDesStyle="'margin-top:-70rpx;margin-left:40rpx;'"></empty>
    </view>
  </view>
</template>

<script>
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import { getMatchListApi, getProductCountApi } from "@/api/product";
import { searchDicListApi } from "@/api/public";
import Rdmore from '../../../components/rdmore.vue';
export default {
  components: {
    Rdmore
  },
  props: {
    queryOptions: {
      type: Object,
      default: () => { },
    },
    mStep: {
      type: [Number, String],
      default: 3,
    },
    mId: {
      type: [Number, String],
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      searchForm: {
        recommendType: 1,
      },
      productList: [],
      tabList: [
        { name: "推荐申请产品", num: 0 },
        { name: "暂不匹配产品", num: 0 },
      ],
      current: 0,
      userInfo: {},
      isAll: false,
      product: [],
      moreKey: 0,
    };
  },
  async created() {
    console.log("this.queryOptions", this.queryOptions);
    this.userInfo = Cache.get(USER_INFO, true);

    await this.getSummerNumber();
    await this.getList();
    this.getDic();
    this.$nextTick(() => {
      // this.$refs.tabCard.$el.scrollLeft = 800;
    });
  },
  methods: {
    getDic() {
      searchDicListApi("product_cid").then((res) => {
        this.product = res.data.product_cid;
      });
    },
    seeAllProduct() {
      this.isAll = !this.isAll;
    },
    gotoProductDetail(item) {

      uni.navigateTo({
        url: `/pagesProduct/detail/index?id=${item.productId}&type=${this.queryOptions.type}`,
      });
    },
    addProductMsg() {
      this.queryOptions.current = this.mStep;
      let params = Object.assign({}, this.queryOptions);
      params.id = encodeURIComponent(this.queryOptions.id);
      let url = Object.keys(params).reduce((pre, cur) => {
        return pre + (params[cur] ? `&${cur}=${params[cur]}` : "");
      }, "");
      uni.navigateTo({
        url: `/pagesProduct/addMatchMsg/index?${url.substring(1, url.length)}`,
      });
    },
    getSummerNumber() {
      const stepMap = {
        1: 1,
        3: 1,
        4: 2,
        5: 3,
      };

      let params = {
        matchStep: stepMap[this.mStep] || 0,
        id: this.queryOptions.id,
        type: this.queryOptions.type,
      };
      getProductCountApi(params).then((res) => {
        this.tabList[0].num = res.data.matchStepSumMap[1] || 0;
        this.tabList[1].num = res.data.matchStepSumMap[2] || 0;
      });
    },
    tabClick(idx) {
      this.productList = []
      this.current = idx;
      this.searchForm.recommendType = idx + 1;
      this.isAll = false;

      this.getList();
    },
    getList() {
      const stepMap = {
        3: 1,
        4: 2,
        5: 3,
      };
      let params = {
        ...this.searchForm,
        ...this.queryOptions,
        matchStep: stepMap[this.mStep] || 0,
      };
      delete params.enterpriseId;
      this.loading = true;
      getMatchListApi(params)
        .then((res) => {
          res.data.forEach((v) => {
            v.loanTerm = v.loanTerm.replace(/,/g, "/");
            this.moreKey++
          });
          this.productList = res.data;

          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .xzj {
  color: #333333;
}

/deep/ .watchMore {

  // margin-top: 0;
  color: #2872fd;
}

.no-data {
  margin-top: 100rpx;
}

/deep/ .qaBox {
  color: #333333 !important;
  text-align: center;
}

.tab-card {
  width: 690rpx;
  display: flex;
  border-radius: 16rpx;
  justify-content: space-between;
  overflow: hidden;

  >view {
    width: 50%;
    text-align: center;
    font-weight: bold;
    padding: 20rpx 0;
  }

  .item {
    background-color: #f6f9f8;
    color: #666666;
    font-size: 30rpx;
  }

  .item-ac {
    color: #fff;
    font-size: 32rpx;
    background-color: #2872fd;
  }
}

.add-msg {
  margin-top: 30rpx;
  box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(246, 251, 255, 1);
  background-color: #fff;
  padding: 26rpx;
  display: flex;
  justify-content: space-between;

  .add-msg-text {
    font-weight: 500;
    font-size: 28rpx;
    color: #666;
  }

  .add-msg-btn {
    font-weight: 500;
    color: #fa7700;
  }
}

.product-list {
  padding-bottom: 80rpx;

  .product-item {
    margin-top: 30rpx;

    // padding-bottom: 20rpx;
    // background-color: #F9FBFF;
  }

  .item-content {
    padding: 30rpx 30rpx 0;
    display: flex;
    align-items: center;
    background-color: #fff;

    .product-item-img {
      width: 95rpx;
      height: 95rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .product-item-name {
      margin-right: 10rpx;
      font-size: 36rpx;
      color: #333333;
      font-weight: 600;
      white-space: nowrap;
      max-width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-item-type {
      background: #fa7700;
      display: flex;
      font-weight: bold;
      align-items: center;
      padding: 0rpx 14rpx;
      height: 42rpx;
      line-height: 42rpx;
      border-radius: 6rpx;
      color: #ffffff;
      font-size: 24rpx;
      margin-left: 0rpx;
      white-space: nowrap;
    }
  }

  .product-item-v {
    background-color: #fff;
    padding: 20rpx 30rpx;
    //display: flex;
    flex-wrap: wrap;

    view>view,
    .DKQ {
      width: 50%;
      font-size: 26rpx;
      color: #999;
      line-height: 40rpx;
      font-weight: bold;
    }
  }

  .product-item-h {
    //padding: 30rpx 0;
    text-align: center;
    font-size: 26rpx;
    height: 58rpx;
    line-height: 58rpx;
    background: #f9fbff;
    color: #fa7700;
    font-weight: 500;
  }

  .product-item-g {
    margin: 0 30rpx 10rpx;
    padding: 20rpx 30rpx;
    background-color: #f9fbff;
    // background-color: pink;
    color: #999999;

    // padding: 30rpx;
  }
}

.image {
  //margin-top: 5rpx;
  margin-left: 20rpx;
  width: 50rpx;
  height: 28rpx;
  overflow: hidden;
}
</style>
